<template>
	<div>
		<Roof>
			<div>注册</div>
		</Roof>

		<div class="box">
			<van-form @submit="onSubmit">
					  <van-field
					    v-model="username"
					    name="用户名"
					    label="用户名"
					    placeholder="请输入6到10位的用户名"
						:maxlength='10'
					    :rules="[{ required: true, message: '请填写用户名' },{  pattern: /\d{6}/, message: '请输入6到10位的用户名' }]"
					  />
					  <van-field
					    v-model="password"
					    type="password"
					    name="密码"
					    label="密码"
						:maxlength='10'
					    placeholder="请输入6到10位的密码"
					    :rules="[{ required: true, message: '请填写密码' },{  pattern: /\d{6}/, message: '请输入6到10位的密码' }]"
					  />
					  <van-field
					    v-model="repeatPassword"
					    type="password"
					    name="密码"
					    label="密码"
					  	:maxlength='10'
					    placeholder="请重复输入您设置的密码"
					    :rules="[
							{ required: true, message: '请填写密码' },
							{  pattern: /\d{6}/, message: '请输入6到10位的密码' },
							{ validator, message: '两次密码不一致' }
							]"
					  />
					  <div style="margin: 16px;">
					    <van-button round block type="info" native-type="submit" color="#A32F2A">注册</van-button>
					  </div>
					</van-form>
					
					<div class="footer"><span  @click="goLogin">密码登录</span></div>
		</div>

	</div>
</template>

<script>
	import Roof from '@/components/common/Roof';

	export default {
		neme: 'Logon',
		data() {
			return {
				username: '',
				password: '',
				repeatPassword:'',
				users:[]
			}
		},
		components: {
			Roof
		},
		methods: {
		    onSubmit(values) {
		      console.log('submit', values);
			  console.log(typeof window.btoa(values))
			  
			  //判断用户名是否重复
			  const panduan = this.users.every(item=>{
				  return item.username == values.username
			  })
			  if(!panduan) {
				  alert('用户名重复')
				  return
			  }
			  
			  this.users.push(values)
			  window.localStorage.setItem('users',window.btoa(window.encodeURIComponent(JSON.stringify(this.users))))
			   
		    },
			//跳转到登录页
			goLogin() {
				this.$router.push({name:'login'})
			},
			//验证两次密码输入是否相同
			validator(val) {
			      return this.password == this.repeatPassword;
			},
		},
		mounted() {
			  
			if(localStorage.getItem("users")) {
				this.users = JSON.parse(decodeURIComponent(window.atob(localStorage.getItem("users"))))
			}
			  
		}
	}
</script>

<style scoped>
	
	.box {
		margin-top: 30px;
		padding: 30px;
	}
	.footer {
		margin-top: 1.5625rem;
		text-align: center;
		font-size: 15px;
		/* margin-left: 50%;
		transform: translate(-50%); */
	}
	
</style>
